<template>
  <div>
    <a-form @submit="handleSubmit" :form="form" style="width: 50%">
      <a-form-item v-bind="formItemLayout" label="当前登录密码">
        <a-input
          v-if="sensitive == 1"
          @change="setInput"
          @focus="showKeyboard(1)"
          :maxLength="maxLength"
          placeholder="请输入当前登录密码"
          v-decorator="[
            'currentpwd',
            {
              rules: [
                {
                  required: true,
                  message: '请输入当前登录密码',
                },
                { validator: validateToNextPassword },
              ],
              validateTrigger: 'blur',
            },
          ]"
          type="password"
        />
        <a-input
          v-else
          placeholder="请输入当前登录密码"
          v-decorator="[
            'currentpwd',
            {
              rules: [
                {
                  required: true,
                  message: '请输入当前登录密码',
                },
                { validator: validateToNextPassword },
              ],
              validateTrigger: 'blur',
            },
          ]"
          type="password"
        />
        <SimpleKeyboard @onChange="onChange" :input="input" v-if="isKeyBoard" />
      </a-form-item>
      <a-form-item
        v-bind="formItemLayout"
        label="新登录密码"
        help="登录密码长度不低于8位，且至少包含数字、大小写字母、特殊字符中的两种"
      >
        <a-input
          v-if="sensitive == 1"
          @change="setInput2"
          @focus="showKeyboard(2)"
          :maxLength="maxLength"
          placeholder="请输入新登录密码"
          v-decorator="[
            'newpwd',
            {
              rules: [
                {
                  required: true,
                  message: '请输入新登录密码',
                },
                { validator: validateToNextPassword },
              ],
              validateTrigger: 'blur',
            },
          ]"
          type="password"
        />
        <a-input
          v-else
          placeholder="请输入新登录密码"
          v-decorator="[
            'newpwd',
            {
              rules: [
                {
                  required: true,
                  message: '请输入新登录密码',
                },
                { validator: validateToNextPassword },
              ],
              validateTrigger: 'blur',
            },
          ]"
          type="password"
        />
        <SimpleKeyboard
          @onChange="onChange2"
          :input="input2"
          v-if="isKeyBoard2"
        />
      </a-form-item>

      <a-form-item v-bind="formItemLayout" label="确认新登录密码">
        <a-input
          v-if="sensitive == 1"
          @change="setInput3"
          @focus="showKeyboard(3)"
          :maxLength="maxLength"
          placeholder="确认新登录密码"
          v-decorator="[
            'newpwdagain',
            {
              rules: [
                {
                  required: true,
                  message: '确认新登录密码',
                },
                {
                  validator: compareToFirstPassword,
                },
              ],
              validateTrigger: 'blur',
            },
          ]"
          type="password"
        />
        <a-input
          v-else
          placeholder="确认新登录密码"
          v-decorator="[
            'newpwdagain',
            {
              rules: [
                {
                  required: true,
                  message: '确认新登录密码',
                },
                {
                  validator: compareToFirstPassword,
                },
              ],
              validateTrigger: 'blur',
            },
          ]"
          type="password"
        />
        <SimpleKeyboard
          @onChange="onChange3"
          :input="input3"
          v-if="isKeyBoard3"
        />
      </a-form-item>

      <div style="text-align: center">
        <a-button class="but_sty" htmlType="submit" type="primary"
          >确定</a-button
        >
        <!-- <a-button size="large" htmlType="submit" type="primary">确定</a-button> -->
      </div>
    </a-form>
    <a-modal title="登录密码重置成功！" v-model="visible" :footer="null">
      <div style="text-align: center">
        <a-button type="primary" @click="gologin">重新登录</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import AForm from "ant-design-vue/es/form/Form";
import ATabs from "ant-design-vue/es/tabs";
// import GlobalFooter from "../../layouts/GlobalFooter";
import AFormItem from "ant-design-vue/es/form/FormItem";
import AInput from "ant-design-vue/es/input/Input";
import AIcon from "ant-design-vue/es/icon";
import AInputGroup from "ant-design-vue/es/input/Group";
import AButton from "ant-design-vue/es/button/button";
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
import AAlert from "ant-design-vue/es/alert/index";
import api from "@/common/api";
import SimpleKeyboard from "../../common/keyboard.vue";
import { get, post } from "@/common/api";
const ATabPane = ATabs.TabPane;

export default {
  name: "Login",
  components: {
    AAlert,
    ACheckbox,
    ACol,
    ARow,
    AButton,
    AInputGroup,
    AIcon,
    AInput,
    AFormItem,
    // GlobalFooter,
    ATabPane,
    ATabs,
    AForm,
    SimpleKeyboard,
  },
  data() {
    return {
      visible: false,
      form: this.$form.createForm(this),
      error: "",
      currentpwd: "",
      newpwd: "",
      newpwdagain: "",
      login: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 7 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15, offset: 1 },
          md: { span: 10 },
        },
      },
      input: "",
      input2: "",
      input3: "",
      isKeyBoard: false,
      isKeyBoard2: false,
      isKeyBoard3: false,
      maxLength: 0,
      sensitive: localStorage.getItem("sensitive"),
    };
  },
  watch: {},
  computed: {},
  mounted() {},
  methods: {
    showKeyboard(type) {
      switch (type) {
        case 1:
          this.isKeyBoard = true;
          this.isKeyBoard2 = false;
          this.isKeyBoard3 = false;
          break;
        case 2:
          this.isKeyBoard = false;
          this.isKeyBoard2 = true;
          this.isKeyBoard3 = false;
          break;
        case 3:
          this.isKeyBoard = false;
          this.isKeyBoard2 = false;
          this.isKeyBoard3 = true;
      }
    },
    onChange(input) {
      console.log("input", input);
      this.form.setFieldsValue({
        currentpwd: input,
      });
      this.input = input;
    },
    onChange2(input) {
      console.log("input", input);
      this.form.setFieldsValue({
        newpwd: input,
      });
      this.input2 = input;
    },
    onChange3(input) {
      console.log("input", input);
      this.form.setFieldsValue({
        newpwdagain: input,
      });
      this.input3 = input;
    },
    setInput(e) {
      console.log(e.target.value);
      this.input = e.target.value;
    },
    setInput2(e) {
      console.log(e.target.value);
      this.input2 = e.target.value;
    },
    setInput3(e) {
      console.log(e.target.value);
      this.input3 = e.target.value;
    },
    handleChange(value) {
      // console.log(value);
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          // console.log("Received values of form: ", values);
          this.currentpwd = values.currentpwd;
          this.newpwd = values.newpwd;
          this.newpwdagain = values.newpwdagain;
          this.Changeloginpaw();
        }
      });
    },
    Changeloginpaw() {
      var params = {
        scope: "updateLoginPwd",
        key: localStorage.getItem("mobileNo"),
      };
      api.fetchPubKey(
        params,
        (res) => {
          let data = {
            pwd: api.getEncryptData(res.data.pubKey, this.currentpwd),
            onePwd: api.getEncryptData(res.data.pubKey, this.newpwd),
            twoPwd: api.getEncryptData(res.data.pubKey, this.newpwdagain),
            key: params.key,
          };
          api.ChangePaw(
            data,
            (res) => {
              if (res.code == "OK") {
                this.visible = true;
              }else if (res.message == "当前输入的原始登陆密码不一致") {
                    console.log('flag',1)
                    let count = localStorage.getItem("failCountLogin");
                    if (count) {
                      if(count==4){
                        this.$message.error('密码错误超过限制，请重新登陆');
                        setTimeout(()=>{
                          this.$router.push({path:'/'})
                        },1500)
                      }else{
                        this.$message.error(res.message);
                        localStorage.setItem('failCountLogin',parseInt(count)+1) 
                      }
                    }else{
                      localStorage.setItem('failCountLogin',1)
                      this.$message.error(res.message);
                    }
                  } else {
                this.$message.error(res.message);
              }
            },
            (err) => {}
          );
        },
        (error) => {
          alert("错误");
        }
      );
      // let data = {
      //   pwd: this.currentpwd,
      //   onePwd: this.newpwd,
      //   twoPwd: this.newpwdagain
      // };
      // api.ChangePaw(
      //   data,
      //   res => {
      //     console.log("res", res);
      //     if (res.code == "OK") {
      //       this.visible = true;
      //     }
      //   },
      //   err => {
      //     console.log("err", err);
      //   }
      // );
    },
    // 登录密码验证
    validateToNextPassword(rule, value, callback) {
      const form = this.form;
      if (
        value &&
        !/(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?.]{8,30}$/.test(
          value
        )
      ) {
        // form.validateFields(['confirm'], { force: true });
        callback("您输入密码的格式有误！");
      } else {
        console.log("newpwd", value);
        this.newpwd = value;
      }
      callback();
    },
    compareToFirstPassword(rule, value, callback) {
      const form = this.form;
      if (value && value !== form.getFieldValue("newpwd")) {
        callback("两次密码不一致");
      } else {
        callback();
      }
    },

    gologin() {
      this.visible = false;
      this.$router.push("/home");
    },
  },
};
</script>

<style lang="less" scoped>
span {
  cursor: pointer;
}

.but_sty {
  width: 100px;
}
.simple-keyboard {
  width: 400px;
}
</style>